<script lang="ts" setup>
  const props = defineProps<{
    title: string;
    url: string;
  }>();

  const handleOpen = () => {
    window.open(props.url, '_blank');
  };
</script>

<template>
  <a-card class="um-card-video" @click="handleOpen">
    <template #cover>
      <div class="cover">
        <icon-play-circle />
      </div>
    </template>
    <a-card-meta :title="title" />
  </a-card>
</template>

<style lang="less" scoped>
  .um-card-video {
    width: 100%;
    border-radius: 10px;
    cursor: pointer;

    .cover {
      height: 200px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 80px;
      color: #fff;
      background: linear-gradient(to bottom, #02effe 0%, #4caefe 100%);
    }
  }
</style>
